<template>
  <div class="balance-withdraw">
    <!-- <navbar :title="'余额提现'"></navbar> -->
    <div class="list">
      <cell-group>
        <field
          v-model="bankName"
          clearable
          label="银行名称："
          placeholder="请输入银行名称"
          label-align="left"
          label-width="100"
        />

        <!-- <field
          v-model="branchName"
          clearable
          label="支行名称："
          placeholder="请输入支行名称"
          label-align="left"
          label-width="100"
        /> -->

        <field
          v-model="accountName"
          clearable
          label="开户姓名："
          placeholder="请输入开户姓名"
          label-align="left"
          label-width="100"
        />

        <field
          v-model="account"
          type='number'
          clearable
          label="银行卡账号："
          placeholder="请输入银行卡账号"
          size="large"
          label-align="left"
          label-width="100"
        />

        <field
          v-model="payMoney"
          clearable
          type='number'
          label="金额："
          placeholder
          size="large"
          label-align="left"
          label-width="100"
        />

        <!-- <div class="input-money">
          <p>金额</p>
          <p>
            <input type="number" />
          </p>
        </div>-->
      </cell-group>
    </div>

    <div class="submit">
      <van-button type="info" size="large" @click="withdraw" :disabled="isSubmitting">{{isSubmitting ? '正在提交' : '确认提现'}}</van-button>
    </div>
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import { Button, Field, Cell, CellGroup, Toast } from "vant";
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import {mapState} from "vuex"

export default {
  components: {
    vanButton: Button,
    Field,
    Cell,
    CellGroup,
    navbar
  },
  data() {
    return {
      account: "",
      bankName: "",
      branchName: "",
      accountName: "",
      payMoney: "",
      agentInfo: {},
      isSubmitting: false
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  async mounted(){
    await this.getAgentInfo()
  },
  methods: {
    // 提现操作
    withdraw() {
      let applyInfo = {
        bankName: this.bankName,
        // branchName: this.branchName,
        accountName: this.accountName,
        account: this.account,
        payMoney: this.payMoney,
        applyType: 4
      };

      const verify = {
        payMoney: "金额",
        account: "账户",
        bankName: "银行名称",
        // branchName: "银行支行名称",
        accountName: "开户名称"
      };

      for (let item in applyInfo) {
        if (!applyInfo[item] || Number(applyInfo[item]) == 0) {
          if (item in verify) {
            // console.log(item);
            Toast(verify[item] + "不能为空");
            return false;
          }
        }
      }

      if(Number(this.agentInfo.balance) < Number(applyInfo.payMoney)){
        Toast("提现金额已超额，请重新输入");
        return false
      }

      if(this.isSubmitting){
        Toast('正在提交，请稍等')
        return false
      }

      // Toast('正在提交，请稍等')
      this.isSubmitting = true

      http.post(urls.TJDLSQ, applyInfo).then(res => {
        this.isSubmitting = false
        if (res.data.code == 200) {
          let data = res.data.data;

          Toast.success("提现申请成功");

          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        }
      });
    },
    getAgentInfo() {
      return this.$http
        .post(this.$urls.DLXQ, {
          id: this.userInfo.id
        })
        .then(res => {
          if (res.data.code == 200) {
            let data = res.data.data;
            this.agentInfo = data;
          }
        });
    },
  }
};
</script>

<style scoped>
.list {
  background-color: #fff;
  /* margin-top: 5px; */
}

.input-money {
  display: flex;
  padding: 10px 15px;
  align-items: center;
}

.input-money > p:first-child {
  width: 100px;
  color: #323233;
  font-size: 1rem;
}

.input-money input {
  border: 0;
  line-height: 40px;
  font-size: 1.8rem;
  width: 80%;
  padding-left: 18px;
}

.submit {
  padding: 10px 15px;
}
</style>